<template>
    <div>
        <div class="introduce">
            <dl>
                <dt>头像: </dt>
                <dd class="avatar">
                    <ElAvatar :size="60" :src="userInfo.avatar"/>
                    <div class="change">
                        <upload-cropper
                            @change="setUserInfo($event, UserFieldEnum.AVATAR)"
                        >
                            <span class="text-xs text-white">修改</span>
                        </upload-cropper>
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>编号: </dt>
                <dd>{{ userInfo.sn }}</dd>
            </dl>
            <dl>
                <dt>账号: </dt>
                <dd>{{ userInfo.account }}</dd>
            </dl>
            <dl>
                <dt>昵称: </dt>
                <dd>
                    {{ userInfo.nickname }}
                    <ClientOnly>
                        <popover-input
                            class="inline-block"
                            :limit="30"
                            :value="userInfo.nickname"
                            @confirm="setUserInfo($event, UserFieldEnum.NICKNAME)"
                        >
                            <ElButton link>
                                <Icon name="el-icon-Edit" :size="16" />
                            </ElButton>
                        </popover-input>
                    </ClientOnly>
                </dd>
            </dl>
            <dl>
                <dt>性别: </dt>
                <dd>
                    {{ GenderOptions.find(option => option.value === userInfo.gender)?.label }}
                    <ClientOnly>
                        <popover-input
                            class="inline-block"
                            type="select"
                            :teleported="false"
                            :value="userInfo.gender"
                            :options="GenderOptions"
                            @confirm="setUserInfo($event, UserFieldEnum.GENDER)"
                        >
                            <ElButton link>
                                <Icon name="el-icon-Edit" :size="16" />
                            </ElButton>
                        </popover-input>
                    </ClientOnly>
                </dd>
            </dl>
            <dl>
                <dt>手机号: </dt>
                <dd>{{ userInfo.mobile ? userInfo.mobile : '未绑定' }}</dd>
            </dl>
            <dl>
                <dt>邮箱号: </dt>
                <dd>{{ userInfo.email ? userInfo.email : '未绑定' }}</dd>
            </dl>
            <dl>
                <dt>订阅记录: </dt>
                <dd>
                    <el-button
                        size="small"
                        @click="viewSubscribe"
                    >查看订阅</el-button>
                </dd>
            </dl>
            <dl>
                <dt>订阅套餐: </dt>
                <dd>
                    {{ userInfo.subscribe.name }}
                    <span v-if="userInfo.subscribe.is_perpetual">
                        (长期有效)
                    </span>
                    <span v-else>
                        (到期: {{userInfo.subscribe.end_time}})
                    </span>
                </dd>
            </dl>
            <dl>
                <dt>注册时间: </dt>
                <dd>{{ userInfo.create_time }}</dd>
            </dl>
            <dl>
                <dt>最后登录: </dt>
                <dd>{{ userInfo.last_login_time }}</dd>
            </dl>
        </div>

        <ClientOnly>
            <popup
                :show="subscribeShow"
                width="600px"
                title="订阅会员"
                confirmButtonText=""
                cancelButtonText=""
                @close="subscribeShow = false"
            >
                <div class="p-6 pt-2">
                    <el-table :data="subscribeList">
                        <el-table-column prop="name" label="套餐名称">
                            <template #default="scope: { row: SubscribeRecordResponse }">
                                <span>{{ scope.row.name }}</span>
                                <el-tag
                                    v-if="scope.row.is_effect"
                                    type="success"
                                    size="small"
                                    class="ml-2"
                                >生效中</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="effect_time" label="生效时间"/>
                        <el-table-column prop="alias" label="到期时间">
                            <template #default="scope: { row: SubscribeRecordResponse }">
                                <span v-if="scope.row.is_perpetual">长期</span>
                                <span v-else>{{ scope.row.expire_time }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </popup>
        </ClientOnly>
    </div>
</template>

<script setup lang="ts">
import useUserStore from '~/stores/user'
import feedback from '~/utils/feedback'
import subscribeApi from '~/api/subscribe'
import userApi from '~/api/user'

// 字段枚举
enum UserFieldEnum {
    GENDER = 'gender',
    AVATAR = 'avatar',
    NICKNAME = 'nickname'
}

// 性别选项
const GenderOptions = [
    {label: '保密', value: 0},
    {label: '男', value: 1},
    {label: '女', value: 2}
]

// 订阅信息
const subscribeShow = ref<boolean>(false)
const subscribeList = ref<SubscribeRecordResponse[]>([])

// 用户信息
const userStore = useUserStore()
const userInfo = computed(() => userStore.users)

// 编辑资料
const setUserInfo = async (
    value: string,
    type: UserFieldEnum
): Promise<void> => {
    await userApi.edit({
        field: type,
        value: value
    })
    await userStore.getUser()
    feedback.msgSuccess('修改成功')
}

/**
 * 查看订阅会员
 */
const viewSubscribe = async () => {
    subscribeShow.value = true
    subscribeList.value = await subscribeApi.record()
}
</script>

<style scoped lang="scss">
.introduce {
    padding: 20px;
    margin: 20px;
    background-color: var(--el-bg-color-lighter);
    border-radius: 8px;
    dl {
        display: flex;
        align-items: center;
        padding: 18px 0;
        font-size: 14px;
        color: var(--el-text-color-regular);
        dt {
            width: 90px;
            padding-left: 5px;
            font-size: 14px;
            color: var(--el-text-color-regular);
        }
        .avatar {
            position: relative;
            display: flex;
            cursor: pointer;
            .change {
                position: absolute;
                bottom: 0;
                display: none;
                width: 100%;
                height: 50%;
                line-height: 30px;
                text-align: center;
                background-color: #00000080;
                border-bottom-right-radius: 9999px;
                border-bottom-left-radius: 9999px;
            }
            &:hover {
                .change {
                    display: block;
                }
            }
        }
    }
}
</style>
